<template>
    <section class="service_chore">
    	<p class="service_chore_step">
    		<el-steps :active="active" finish-status="success" align-center>
			  <el-step title="基本信息"></el-step>
			  <el-step title="服务编排"></el-step>
			  <el-step title="访问策略"></el-step>
			</el-steps>
    	</p>
  		
		<base-info @changeGuanXi="changeGuanXi" :baseInfoForm="baseInfoForm" :treeSeach="treeSeach" v-show="active===0" @nextStep="nextStep"></base-info>
        <chore-detail :choreDetailForm="choreDetailForm" :lastForm="lastForm" v-show="active===1" v-if="detailType==3"   @nextStep="nextStep"></chore-detail>
        <chore-detail-zuhe :choreDetailForm2="choreDetailForm2" :lastForm="lastForm" v-show="active===1"  v-if="detailType==4"  @nextStep="nextStep"></chore-detail-zuhe>
        <service-chenue v-if="active===2" :chenueForm="chenueForm" @nextStep="nextStep" :detailType="detailType" :lastForm="chenuelastForm" :fabuAreaRadio="fabuAreaRadio"></service-chenue>
    </section>
</template>

<script>
    import baseInfo from "./components/baseInfo"
    import choreDetail from "./components/choreDetail"
    import serviceChenue from "./components/serviceChenue"
	 import choreDetailZuhe from "./components/choreDetailZuhe"
	 import {
	 	componentGetYwType
	 } from "@/views/serverResource/common/js_css_img/serverResourceComputed"
	 import {
	 	computedGroupPublic,
	 	componentsGetDetail
	 } from "../css_js_img/computedSmartResource"
    export default {
    	components:{
    		baseInfo,
    		choreDetail,
    		choreDetailZuhe,
    		serviceChenue
    	},
        data() {
          return {
          		chenuelastForm:{},
          		baseInfoForm:{/*主要信息的form*/
          			name:'',
          			parentResouceServiceId:0,
          			smMetaData:[],
          		},
          		choreDetailForm:{/*服务编排依赖的form*/
          			smGroupResourceServices:'',
          			smGroupOutputFieldViewVos:'',
          		},
          		choreDetailForm2:{/*服务编排组合的form*/
          			smGroupResourceServices:''
          			
          		},
          		chenueForm:{
          			requesterIdList:'',
          			accessTactics:null,
          			businessType1:'',
          		},
          		active:0,
          		detailType:3,/**/
          		lastForm:{},
          		form:{
					"name":"",  //服务名称
					"describe":"",  //描述
					"segmentId":'',   //网段
					"nodeIds":"",  //可发布的区域
					"businessType":"",  //业务信息类型
				    "infoType":"",  //信息类型
					"type":0,  //1 标准服务  2个性化服务  3依赖服务  4组合服务
					"accessTactics":{   //访问策略
						
					},
					"groupResourceServiceList":[{    //依赖或者组合的服务集合
						"resourceServiceId":"",  //被依赖或组合的服务资源id
						"parentResourceServiceId":""  //要依赖或组合的服务
					}],
					"smGroupOutputFieldViewList":[  //输出参数
						
					],
					"requesterIdList":[]   //服务的请求方
				},
          		treeSeach:{
	          		segment:[],/*网段类型*/
	          		info_type:[],/*信息类型*/
	          		business_type:[],/*业务类型*/
	          	},
	          	formLabel:[],
	          	fabuAreaRadio:[],
          };
        },
        methods: {
        		changeType(val){/*依赖或者组合*/
        			
        		},
        		nextStep(obj){
        			console.log(obj.form);
        		
        			if(obj.form.length!=0){
        				switch (obj.val){
        					case 1:
        						this.form.name = obj.form.name;
			        			this.form.describe = obj.form.describe;
			        			this.form.segmentId = obj.form.segmentId;
			        			this.form.businessType = obj.form.businessType.join(',');
			        			this.form.infoType = obj.form.infoType.join(',');
			        			this.form.type = obj.form.type;
			        			this.lastForm = obj.form;
			        			this.fabuAreaRadio = obj.farea;
        						break;
        					case 2:
        						if(this.detailType==3){/*依赖*/
        							this.form.groupResourceServiceList = [];
        							for (let i = 0; i <  obj.form.serviceItem.length-1; i++) {
        									this.form.groupResourceServiceList.push(
	        								  	{
	        								  		"resourceServiceId": obj.form.serviceItem[i+1].id,  //被依赖或组合的服务资源id
													"parentResourceServiceId": obj.form.serviceItem[i].id  //要依赖或组合的服务
	        								  	}
        									)
        							}
        						}else if(this.detailType==4){/*组合*/
        							this.form.groupResourceServiceList = [];
        							for (let i = 0; i <  obj.form.serviceItem.length; i++) {
        									this.form.groupResourceServiceList.push(
	        								  	{
	        								  		"resourceServiceId": obj.form.serviceItem[i].id,  //被依赖或组合的服务资源id
													"parentResourceServiceId": -1  //要依赖或组合的服务
	        								  	}
        									)
        							}
        						}
        						this.chenuelastForm = obj.form;
        						break;
        						case 0:
        							this.form.accessTactics = obj.form.accessTactics
									this.form.nodeIds = obj.form.businessType1.join(',');
									this.form.smGroupOutputFieldViewList =obj.form.tuomingArray;
									this.form.requesterIdList = obj.form.requesterIdList1
									console.log(this.form);
									computedGroupPublic(this);
        						break;
        					default:
        						break;
        				}
        				
        			}
        			this.active = obj.val;
        			
        		},
        		changeGuanXi(val){
        			this.detailType = val;
        		}
        },
        mounted(){
        	componentGetYwType(this,'');
        	if(this.$route.params.nodepublicId!=undefined){
//      		alert(this.$route.params.nodepublicId)
        		this.form.nopublicId = this.$route.params.nodepublicId;
        		componentsGetDetail(this);
        	}
        },
       
  };
</script>

<style scoped="scoped">
   section.service_chore p.service_chore_step {
	    padding: 10px 260px;
	    background: #fff;
	}
   section.service_chore {
    background: #ededed;
    height: 100%;
    overflow-y: scroll;
}

</style>